<template>
  <div class="lm-confirm-make">
    <changePlan v-if="!modePlan.plan" :plan.sync="modePlan"></changePlan>
    <layout v-else>
      <!-- <combo></combo> -->
      <component :is="nextKey[index]"></component>
    </layout>
    <div style="border-top:1px solid #ccc;padding-top:10px;">
      <el-button type="primary"> 查看报告 </el-button>
      <el-button style="float:right;" @click="canelButton"> 取消 </el-button>
      <template v-if="modePlan.plan">
        <el-button style="float:right;" @click="nextButton"> 下一步 </el-button>
        <el-button style="float:right;" @click="prevButton"> 上一步 </el-button>
      </template>
    </div>
  </div>
</template>
<script>
const defaultForm = {
  id: null,
  patientName: null,
  gender: null,
  birthDay: null,
  compliance: null,
  hightGrow: null,
  adamsApple: null,
  period: null,
  firstPeriod: null,
  parent: null,
  relationship: null,
  parentProfession: null,
  parentMobile: null,
  orthodonticHis: null
};
import { form, crud } from '@crud/crud';
import changePlan from '@/views/components/changePlan';
import Combo from '@/views/components/changePlan/combo';
import Design from '@/views/components/changePlan/design';
import ConfirmInfo from '@/views/components/changePlan/confirmInfo';
import layout from '@/views/components/changePlan/layout.vue';
export default {
  name: 'Message',
  components: { changePlan, layout, Combo, Design, ConfirmInfo },
  mixins: [form(defaultForm), crud()],
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      modePlan: {
        plan: ''
      },
      index: 0,
      nextKey: ['combo', 'design', 'confirmInfo']
    };
  },
  watch: {
    'modePlan.plan'(newVal) {
      console.warn(newVal);
    }
  },
  methods: {
    canelButton() {
      this.visible = false;
    },
    nextButton() {
      this.index++;
      if (this.index >= this.nextKey.length) {
        this.index = this.nextKey.length - 1;
      }
    },
    prevButton() {
      this.index--;
      if (this.index < 0) {
        this.index = 0;
        this.modePlan.plan = '';
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.lm-confirm-make{

}
</style>
